<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bubble_sort</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script>
</head>
<body>

<form>

    服务器地址：
    <input type="plaintext" id="addr" value="192.168.159.134" />
    端口号：
    <input type="plaintext" id="port" value="13999" />

    <br />

    输入消息：
    <input type="plaintext" id="input" value="Hello,World!" />
    <br />

    输出消息：
    <input type="plaintext" id="echo" />
    </form>

<canvas id="myChart" width="400" height="200"></canvas>
<script type="text/javascript" src="message.js"></script>
<script>
const ctx = document.getElementById('myChart');
const labels = ['3', '23', '6','5', '10', '15', '4', '9', '12', '20'];  // 设置 X 轴上对应的标签
const data = {
	labels: labels,
	datasets: [{
		label: '我的第一个柱形图',
		data: [3,23,6,6,10,15,4,9,12,20],
		backgroundColor: [      // 设置每个柱形图的背景颜色
		'rgba(255, 99, 132, 0.2)',
		'rgba(255, 159, 64, 0.2)',
		'rgba(255, 205, 86, 0.2)',
		'rgba(75, 192, 192, 0.2)',
		'rgba(54, 162, 235, 0.2)',
		'rgba(153, 102, 255, 0.2)',
		'rgba(201, 203, 207, 0.2)',
		'rgba(200, 165, 255, 0.2)',
		'rgba(133, 232, 186, 0.2)',
   		'rgba(255, 176, 87, 0.2)',
	 	],
		borderColor: [     //设置每个柱形图边框线条颜色
		'rgb(255, 99, 132)',
		'rgb(255, 159, 64)',
		'rgb(255, 205, 86)',
		'rgb(75, 192, 192)',
		'rgb(54, 162, 235)',
		'rgb(153, 102, 255)',
		'rgb(201, 203, 207)',
		'rgb(200, 165, 255)',
                'rgb(133, 232, 186)',
                'rgb(255, 176, 87)',

    ],
    borderWidth: 1     // 设置线条宽度
  }]
};
const config = {
  type: 'bar', // 设置图表类型
  data: data,  // 设置数据集
  options: {
    scales: {
      y: {
        beginAtZero: true // 设置 y 轴从 0 开始
      }
    }
  },
};
const myChart = new Chart(ctx, config);
// add echotest from https://gitee.com/biparadox/cube-1.3-webtest	
    var isconnected = false;
    var input = document.getElementById("input");
    var echo = document.getElementById("echo");
    var wsock;

    var plainmsg = {"head":"","record":"","expand":""};
    plainmsg["head"]={"tag":"MESG","version":65537};
    var jsonstr = JSON.stringify(plainmsg);

    function mywebsockinit() {
        if (isconnected) {
            alert("已连接服务器！")
            return;
        }
        var netaddr=document.getElementById("addr");
        var netport=document.getElementById("port");

 //     wsock = new WebSocket('ws://192.168.159.135:12888', 'cube-wsport');
        wsock = new WebSocket('ws://'+netaddr.value+':'+netport.value+'/');

        wsock.onopen = function (e) {
            if (!isconnected) {
                isconnected = true;
                alert("连接成功！")
            }
            return;
        };
        wsock.onclose = function (e) {
        };
        wsock.onerror = function (e) {
        };
        wsock.onmessage = function (e) {
            var msg;
            msg = JSON.parse(e.data);
            if (msg.RECORD[0].message != null) {
                 document.getElementById("echo").value += msg.RECORD[0].message;
                 document.getElementById("echo").value += '\n';

            }
        }
    }

    function myFunction() {
        if(!isconnected)
        {
            alert("连接未建立！")
            return;
        }

        var message = {message:input.value};
        var msg = new Cube_msg("MESSAGE","BASE_MSG");
        msg.addrecord(message);
        wsock.send(msg.output())
    };
</script>
<button type="button" onclick="mywebsockinit()" id="connect">连接服务器</button>
<button type="button" onclick="myFunction()" id="sendmsg">发送消息</button>

</body>
</html>
